<template>
  <div id="sign-view">
    <div class="content">
      <SignIn v-if="this.signflag==='in'"/>
      <SignUp v-if="this.signflag==='up'"/>
      <SignGuide v-if="this.signflag==='guide'"/>
    </div>
  </div>
</template>

<script>
  import SignIn from './signViews/signIn.vue'
  import SignUp from './signViews/signUp.vue'
  import SignGuide from './signViews/signGuide.vue'
  import eventBus from '../util/event-bus'
  export default {
    name: 'SignView',

    data () {
      return {
        signflag: 'in'
      }
    },

    mounted: function () {
      eventBus.$on('goSignUp', (flag) => {
        this.signflag = flag;
      });
      eventBus.$on('goSignIn', (flag) => {
        this.signflag = flag;
      });
      eventBus.$on('goSignGuide', (flag) => {
        this.signflag = flag;
      });
    },

    components: {
      SignIn,
      SignUp,
      SignGuide
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../static/common/common.scss";

  #sign-view {
    width: 100%;
    height: $min-height;
    background: #061221;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
  }
</style>
